<template>
    
    <el-form style="width:100%" :model="selectForm" label-width="120px" label-position="top">
        <el-row style="width:100%" gutter="24">
            <el-col :span="select.span" v-for="select in selectConfig" :key="select">
                <el-form-item :label="select.label">
                    <el-input v-model="selectForm[select.key]" style="width:100%;" :rows="select.rows" :type="select.type" :placeholder="select.placeholder"/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
        <!-- <el-col :span="select.span" v-for="select in selectConfig" :key="select">
            <div>{{select.label}}</div>
            <el-input v-model="selectForm[select.key]" style="width:100%;" :rows="select.rows" :type="select.type" :placeholder="select.placeholder"/>
        </el-col> -->
    
    
</template>
<script setup>
import { ref } from "@vue/reactivity";
const selectConfig = ref([
    {label:"KEY",key:"sqlKey",span:12,rows:3,type:"text",placeholder:"请输入..."},
    {label:"SELECT",key:"sqlSelect",span:12,rows:3,type:"textarea",placeholder:"SELECT..."},
    {label:"FROM",key:"sqlFrom",span:12,rows:3,type:"textarea",placeholder:"FORM..."},
    {label:"WHERE",key:"sqlWhere",span:12,rows:3,type:"textarea",placeholder:"WHERE..."},
    {label:"ORDER",key:"sqlOrder",span:12,rows:3,type:"textarea",placeholder:"ORDER BY..."},
    {label:"GROUP",key:"sqlGroup",span:12,rows:3,type:"textarea",placeholder:"GROUP BY..."}
])
const selectForm = ref({})
</script>
<style scoped>

</style>